import {Component, ComponentProps, VueComponent} from "vue3-oop";
import {NCollapse, NCollapseItem, NTag, NSpace} from "naive-ui";
import Draggable from 'vuedraggable';

import AVAILABLE_WIDGETS from '../widgets/basic/WidgetAvailable';
import styles from './index.module.scss';

interface IProps {}
@Component()
export default class SparePanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {}

  render(){

    return(
      <NCollapse
        class={[styles.spare_panel]}
        defaultExpandedNames={AVAILABLE_WIDGETS.map(group=>group.title)}
      >
        {
          AVAILABLE_WIDGETS.map(group=>{

            return(
              <NCollapseItem title={group.title} name={group.title}>
                <Draggable
                  {...{
                    animation: "300",
                    group: {
                      name: "form",
                      pull: "clone",
                      put: false
                    },
                    chosenClass: styles.spare_chosen,
                    dragClass: styles.spare_drag,
                    ghostClass: styles.spare_ghost,
                    sort: false
                  } as any}
                  list={group.list}
                  itemKey="type"
                  class={"n-space"}
                  style={{display:"flex",flexFlow:"row wrap",justifyContent:"flex-start",gap:"8px 12px"}}
                >
                  {/*display: flex; flex-flow: row wrap; justify-content: flex-start; gap: 8px 12px;*/}
                  {{
                    item:({element}:any)=>{

                      return(
                        <NTag
                          class={[styles.spare_widget,"spare_dragin"]}
                        >{element.label}</NTag>
                      )
                    }
                  }}
                </Draggable>
              </NCollapseItem>
            )
          })
        }
      </NCollapse>
    )
  }
}